<template>
  <div :id="id" ref="playerContainer" class="player" />
</template>
<script>
import Player, { Events } from 'xgplayer'

// import { volume, playbackRate } from 'xgplayer/dist/controls'
export default {
  name: 'Player',
  props: {
    srcset: {
      type: [Array, String],
      default: '',
      required: true
    },
    poster: {
      type: String,
      default: ''
    },
    landscape: {
      type: Boolean,
      default: false
    },
    autoplay: {
      // 是否自动播放(pc无效)
      type: Boolean,
      default: false
    },
    hideControls: {
      // 是否隐藏底部控制栏
      type: Boolean,
      default: false
    },
    fullscreen: {
      // 是否自动全屏：TODO 测试未过
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      player: null,
      id: 'playerId'
    }
  },
  computed: {
  },
  created() {
    this.id = (Math.random() * 0xffff).toString(16)
  },
  mounted() {
    this.$nextTick(() => {
      this.initPlayer()
    })
  },
  beforeDestroy() {
    this.player && typeof this.player.destroy === 'function' && this.player.destroy()
  },
  methods: {
    // 实例
    initPlayer() {
      const config = {
        // id: this.id,
        el: this.$refs.playerContainer,
        url: this.srcset,
        videoInit: true, // 初始化显示视频首帧
        // controlPlugins: [
        //   volume,
        //   playbackRate
        // ],
        playbackRate: [0.5, 0.75, 1, 1.5, 2], // 传入倍速可选数组
        poster: this.poster,
        height: '100%',
        width: '100%',
        playsinline: true,
        'x5-video-player-type': 'h5-page'
        // 'closeVideoTouch': true
      }

      if (this.fullscreen) {
        // config.rotateFullscreen = true
        // config.fluid = true // 填满屏幕
        // config.rotateFullscreen = true
        // config.cssFullscreen = true
      }
      if (this.autoplay) {
        config.autoplay = true
      }
      if (this.hideControls) {
        config.closeVideoDblclick = false // 是否关闭双击切换暂停/播放的能力
        config.closePauseVideoFocus = false
        config.controls = false
      }

      this.player = new Player(config)
      this.player.once('ready', () => {
        this.$emit('ready')
      })
      // 处理video层级过高
      this.player.once('complete', () => {
        // const el = this.$el.querySelector('video')
        // el.setAttribute('webkit-playsinline', true)
        // el.setAttribute('x5-video-player-type', 'h5-page')
        // el.setAttribute('x5-video-orientation', 'portraint')
        // if (this.landscape) {
        //   el.style.width = '100vh !important'
        //   el.style.height = '100vw !important'
        // }
      })
      this.player.on('pause', () => {
        this.$emit('click')
      })
      this.player.on('ended', () => {
        this.$emit('click')
      })
      this.player.on('error', () => {
        this.$emit('click')
      })
      // 监听网页全屏(即页面全屏)也是一样的逻辑
      this.player.on(Events.FULLSCREEN_CHANGE, (isFullscreen) => {
        if (isFullscreen) {
          // 全屏TODO
          this.$emit('requestFullscreen')
        } else {
          // 退出全屏TODO
          this.$emit('exitFullscreen')
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.player{
  width: 100%;
  height: 100%;
  .video {
    width: 100%;
    height: 100%;
  }
}
</style>
